<template>
  <div class="register-container">
    <h1>注册</h1>
    <el-form ref="registerForm" :model="registerForm" :rules="rules" label-width="120px">
      <el-form-item label="学号" prop="studentNo">
        <el-input v-model="registerForm.studentNo" placeholder="请输入学号"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="registerForm.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
            v-model="registerForm.password"
            type="password"
            placeholder="请输入密码"
            show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="学校" prop="school">
        <el-select v-model="registerForm.school" placeholder="请选择学校">
          <el-option label="XXX大学" value="xxx"></el-option>
          <el-option label="YYY大学" value="yyy"></el-option>
          <el-option label="ZZZ大学" value="zzz"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="registerForm.gender">
          <el-radio label="male">男</el-radio>
          <el-radio label="female">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="captcha">
        <el-input v-model="registerForm.captcha" placeholder="请输入验证码">
          <template #append>
            <el-button
                :disabled="countdown > 0"
                @click="sendCaptcha"
            >
              {{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
            </el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleRegister">注册</el-button>
        <el-button @click="handleLogin">已有账号？去登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
export default {
  name: "RegisterContent",
  data() {
    return {
      registerForm: {
        studentNo: "",
        name: "",
        email: "",
        school: "",
        password: "",
        gender: "",
        captcha: "",
      },
      rules: {
        studentNo: [
          {required: true, message: "请输入学号", trigger: "blur"},
          {min: 12, message: "学号长度不能少于12位", trigger: "blur"},
        ],
        name: [
          {required: true, message: "请输入姓名", trigger: "blur"},
        ],
        email: [
          {required: true, message: "请输入邮箱", trigger: "blur"},
          {type: "email", message: "请输入有效的邮箱地址", trigger: ["blur", "change"]},
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 6, message: "密码长度不能少于6位", trigger: "blur"},
        ],
        school:[
          {required:true,message:"请选择学校",trigger:"blur"},
        ],
        gender:[
          {required:true,message:"请选择性别",trigger:"blur"},
        ],
        captcha:[
          {required:true,message:"请输入验证码",trigger:"blur"},
        ]
      },
      countdown: 0, // 倒计时
    };
  },
  methods: {
    handleRegister() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          console.log("注册成功", this.registerForm);
          this.$router.push('/login'); // 假设有一个登录页面路由
        } else {
          console.log("表单验证失败");
        }
      });
    },
    handleLogin() {
      this.$router.push('/login'); // 假设有一个登录页面路由
    },
    sendCaptcha() {
      if (this.countdown > 0) {
        return; // 如果正在倒计时，直接返回
      }
      this.countdown = 60; // 设置倒计时为60秒
      this.startCountdown(); // 开始倒计时
      console.log("发送验证码到邮箱", this.registerForm.email);
      // 调用发送验证码接口
    },
    startCountdown() {
      const timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    },
  },
};
</script>

<style scoped>
.register-container {
  width: 100%;
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  border-radius: 5px;
  background-color: white;
}
</style>